import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actions } from '../../store/cart'
import { bindActionCreators } from 'redux'
import CartItem from '../../component/CartItem'

class Cart extends Component {
  render() {
    const { list, shopNum, totalPrice } = this.props
    return (
      <div className='cart-page'>
        <div className='shop-list'>
          {list.map(item => <CartItem key={item.id} itemData={item}/>)}
        </div>
        <div className='cart-data'>
          <div className='left'>
            <div className='price'>合计：￥{totalPrice.toFixed(2)}</div>
            <div className='shop'>共购买 {shopNum} 件商品</div>
          </div>
          <div className='buy'>结算</div>
        </div>
      </div>
    )
  }
}

function mapStateFromProps (state) {
  // 获取 store state 中所有数据，并转成当前组件的 props
  return state.cartStore  // 只分发 cartStore
}

function mapDispatchFromProps (dispatch) {
  // 发送 actions 中的 action
  // 将 actions 中的方法绑定在组件身上，转成 props
  return bindActionCreators(actions, dispatch)

}

export default connect(mapStateFromProps,mapDispatchFromProps)(Cart)